<template>
  <view class="full-page">
    <!-- <view class="album-box">
      <view class="album-item" v-for="(url,idx) in albumImages" :key="'al-i-' + idx">
        <view 
          :style="{'background-image': 'url(' + url + ')', 'background-size': '100% 100%'}"
          class="album-image"
          @click="preview(idx)"></view>
      </view>
    </view> -->
    <ai-waterfall-flow :wf-list="wfList" :update-num="20" @itemtab="preview"></ai-waterfall-flow>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        albumType: "",
        placeId: "",
        albumImages: [],
        wfList: [],
        more: false,
        page: 1,
        size: 20,
      };
    },
    onLoad(options) {
      this.albumType = options.type
      this.placeId = options.placeId
      this.loadImages()
    },
    onReachBottom() {
      if (this.more) {
        this.loadImages()
      }
    },
    methods: {
      loadImages() {
        let url = this._getImageApi()
        this.$get(url, {
          data: { placeId: this.placeId, page: this.page, size: this.size}
        })
        .then(res => {
          let images = res.module || []
          let wfImages = []
          images.forEach(img => {
            this.albumImages.push(img.url)
            wfImages.push({image: img.url})            
          })
          this.wfList = wfImages
          this.more = images.length >= this.size
          if (this.more) {
            this.page = this.page + 1;
          }
        })
      },
      _getImageApi() {
        let t = this.albumType
        if (t == 'sight') {
          return this.$urls.getApi("sightImages")
        }
        if (t == 'hotel') {
          return this.$urls.getApi("hotelImages")
        }
        if (t == 'res') {
          return this.$urls.getApi("resImages")
        }
      },
      preview(item) {
        uni.previewImage({
          current: item.image,
          urls: this.albumImages
        })
      }
    }
  }
</script>

<style lang="scss">
@import "@/styles/_var.scss";

.album-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding-left: $gutter;
  
  .album-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 0 $gutter $gutter 0;
    flex-basis: 50%;
    cursor: pointer;
    
    .album-image {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      height: 0;
      width: 100%;
      padding-bottom: 67%;
      transition: 0.3s;
    }
  }
}
</style>
